<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.net/axios/0.18.0/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <div class="grid-content">
        <h2>登录</h2>
        <el-form :model="login" status-icon :rules="rules" ref="stu" label-width="100px"
                 class="demo-ruleForm">
            <el-form-item label="用户名" prop="user" placeholder="请输入用户名">
                <el-input type="text" v-model="login.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" placeholder="请输入密码">
                <el-input type="text" v-model="login.password"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="yzm" placeholder="请输入验证码,注意有大小写之分">
                <el-input type="text" v-model="yz"></el-input>
                <img src="/lodinweb2_0_war_exploded/code" onclick="this.src=this.src+'?'+Math.random()" width="50"
                     height="30">
            </el-form-item>

            <el-form-item>
                <el-button type="text" @click="loginTF()">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loginData: [],
                login: {
                    name: "",
                    password: ""
                },
                rules: null,
                yz: ""
            }
        },
        mounted() {
            axios
                .get('/lodinweb2_0_war_exploded/crud?type=login')
                .then((reponse) => {
                    this.loginData = reponse.data;
                })
                .catch(function (error) {  //请求失败处理
                    console.log(error);
                });
        },
        methods:{
            loginTF() {
                axios
                    .get('/lodinweb2_0_war_exploded/crud?type=login&name=' + this.login.name + "&pwd=" + this.login.password + "&yz=" + this.yz)
                    .then((reponse) => {
                        if (reponse.data=="emptycode"){
                            alert("验证码不能为空")
                        }else if (reponse.data=="error"){
                            alert("验证码错误")
                        }else if (reponse.data=="nologin"){
                            alert("用户名或密码错误")
                        }else{
                            window.location.href="studentAxiosUI.html"
                        }
                    })
                    .catch(function (error) {  //请求失败处理
                        console.log(error);
                    });
            },
        }

    })
</script>
</html>